<%@page import="java.util.Date"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<head>

</head>
<body>

	<div id="fb-root"></div>
	<script>
		(function(d, s, id) {
			var js, fjs = d.getElementsByTagName(s)[0];
			if (d.getElementById(id))
				return;
			js = d.createElement(s);
			js.id = id;
			js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1&appId=1531500170435871";
			fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));
	</script>

	<div id="fb-root"></div>
	<script>
		(function(d, s, id) {
			var js, fjs = d.getElementsByTagName(s)[0];
			if (d.getElementById(id))
				return;
			js = d.createElement(s);
			js.id = id;
			js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&appId=1531500170435871&version=v2.0";
			fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));
	</script>

	<div class="navi-block">
		<div>
			<a href="home.html">Trang Chủ </a> <img
				src="resources/images/arrow.png" />
		</div>
		<c:forEach var="block" items="${navi}">
			<div>
				<a href="detailcategory.html?id=${block.categoryId}">${block.categoryName}</a>
				<img src="resources/images/arrow.png" />
			</div>
		</c:forEach>

		<div>
			<a href="home.html">${productDetail.product.productName}</a>
		</div>

	</div>
	<div class="content">
		<!--main content-->
		<div class="content-main">
			<!--detail -->
			<div class="product-detail">
				<div class="gallary">
					<ul class="pgwSlideshow">
						<c:forEach var="images" items="${productDetail.images}">
							<li><img src="${images.imageUrl}"></li>
						</c:forEach>
					</ul>
				</div>

				<div class="infos">
					<div class="name">${productDetail.product.productName}</div>
					<c:choose>
						<c:when test="${count != 0}">
							<p>Tinh trang: Còn Hàng</p>
						</c:when>

						<c:otherwise>
							<p>Tinh trang: Hết Hàng</p>
						</c:otherwise>
					</c:choose>

					<c:forEach var="type" items="${types}">
						<c:set var="flag" value="${0}"></c:set>
						<c:forEach var="detail" items="${productDetail.typeDetails}">
							<c:if test="${detail.type.typeId == type.typeId}">
								<c:set var="flag" value="${1}"></c:set>
							</c:if>
						</c:forEach>
						<c:if test="${flag == 1}">
							<p>
								${type.typeName}: <select name="${type.typeName}">
									<c:forEach var="detail" items="${productDetail.typeDetails}">
										<c:if test="${detail.type.typeId == type.typeId}">
											<option value="${detail.typeDetailName}">${detail.typeDetailName}</option>
										</c:if>
									</c:forEach>

								</select>
							</p>
						</c:if>

					</c:forEach>

					<p>
						Số Lượng: <input type="text" name="count" />
					</p>

					<p>
					Cửa Hàng:
					</p>
					<table border="1" style="margin-left: 30px; margin-top:30px; width: 80%">
						<tr>
							<td>Tên Của Hàng</td>
							<td>Địa Chỉ</td>
							<td>Số Lượng</td>
						</tr>

						<c:forEach var="store"
							items="${productDetail.storeProductDetails}">
							<tr>
								<td>${store.pk.store.storeName}</td>
								<td>${store.pk.store.address}</td>
								<td>${store.count}</td>
							</tr>
						</c:forEach>
					</table>
					
					


					<div class="price">
						<fmt:formatNumber type="number" maxFractionDigits="0"
							value="${productDetail.price}" />
						VND
					</div>
					<input type="image" class="addcart" />

					<div style="float: left; margin-top: 50px;">
						<div class="fb-share-button"
							data-href="http://localhost:8080/onlinestore/detail.html?id=${productDetail.productDetailId}"
							data-layout="button_count"></div>
						<div class="fb-like"
							data-href="https://www.facebook.com/pages/deltashopvn/1510907312515578?fref=ts"
							data-layout="standard" data-action="like" data-show-faces="true"></div>
					</div>
				</div>


			</div>


			<div class="content-detail">
				<p>
					${productDetail.product.description}
				</p>
			</div>
		</div>

		<div class="fb-comments"
			data-href="http://localhost:8080/onlinestore/detail.html?id=${productDetail.productDetailId}"
			data-colorscheme="light" data-numposts="5" data-width="1000"></div>
	</div>
	<!-- CONTENT : START -->

</body>